<template>
    <div>
        <!-- 导航部分开始 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>生产管理</el-breadcrumb-item>
            <el-breadcrumb-item>生产工单</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->
        <!--  搜索栏开始 -->
        <el-form style="margin-top: 15px;" :inline="true" :model="queryworkTicket" class="demo-form-inline">
            <el-form-item label="工单编码">
                <el-input v-model="queryworkTicket.workTicketCode" placeholder="工单编码" clearable />
            </el-form-item>
            <el-form-item label="工单名称">
                <el-input v-model="queryworkTicket.workTicketName" placeholder="工单名称" clearable />
            </el-form-item>
            <el-form-item label="来源数据">
                <el-input v-model="queryworkTicket.sourceCode" placeholder="来源数据" clearable />
            </el-form-item>
            <el-form-item label="产品编号">
                <el-input v-model="queryworkTicket.productCode" placeholder="产品编号" clearable />
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input v-model="queryworkTicket.productName" placeholder="产品名称" clearable />
            </el-form-item>
            <el-form-item label="客户编码">
                <el-input v-model="queryworkTicket.clientCode" placeholder="客户编码" clearable />
            </el-form-item>
            <el-form-item label="客户名称">
                <el-input v-model="queryworkTicket.clientName" placeholder="客户名称" clearable />
            </el-form-item>
            <el-form-item label="需求日期">
                <el-input v-model="queryworkTicket.requestDate" placeholder="需求日期" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadworkTicket">搜索</el-button>
                <el-button type="primary" @click="loadworkTicket">重置</el-button>
            </el-form-item>
        </el-form>
        <!--  搜索栏结束 -->
        <!-- 工具栏开始 -->
        <div class="flex">
            <el-button title="新增工单" @click="this.addworkTicketDialogVisible = true" type="primary"><el-icon>
                    <Plus />
                </el-icon></el-button>
            <el-button @click="handlerEditworkTicket" title="编辑选中工单" type="primary"><el-icon>
                    <EditPen />
                </el-icon></el-button>
            <el-button @click="handlerDeleteworkTicket" title="删除选中工单" type="primary"><el-icon>
                    <Delete />
                </el-icon></el-button>
        </div>
            <!-- 工具栏结束 -->
        <!-- 表格 开始 -->
        <el-table ref="workTicketTable" :data="workTicket" max-height="800px" stripe="true" border="true"
            style="width: 90%;margin-top: 10px;">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="工单编码" property="workorderCode" />
            <el-table-column align="center" label="工单名称" property="workorderName" />
            <el-table-column align="center" label="工单来源" property="sourceCode" />
            <el-table-column align="center" label="订单编号" property="sourceCode" />
            <el-table-column align="center" label="产品编号" property="productCode" />
            <el-table-column align="center" label="产品名称" property="productName" />
            <!-- <el-table-column align="center" label="规格型号" property="clientCode" /> -->
            <el-table-column align="center" label="单位" property="unitOfMeasure" />
            <el-table-column align="center" label="工单数量" property="quantity"/>
            <el-table-column align="center" label="调整数量" property="quantityChanged" />
            <el-table-column align="center" label="已生产数量" property="quantityProduced" />
            <el-table-column align="center" label="批次号" property="batchCode" />
            <el-table-column align="center" label="客户编码" property="clientCode" />
            <el-table-column align="center" label="客户名称" property="clientName" />
            <el-table-column align="center" label="需求日期" :formatter="timeFormatter" property="requestTimeMilliSeconds" >
                <template #default="scope">
                    <el-link type="success" @click="showworkTicketData(scope.row)">
                        {{ scope.row.workTicketType }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column align="center" label="备注" property="remark"></el-table-column>
            <el-table-column width="150" align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDataDelete(scope.row)"
                        title="您是否要删除这行数据">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格 结束 -->
        <!-- 分页栏开始 -->
        <el-pagination style="margin-top: 15px;" :page-size="workTicketLimit" :pager-count="workTicketMaxPage"
            @current-change="changePage" background layout="prev, pager, next" :total="workTicketTotal" />
        <!-- 分页栏结束 -->

        <!-- 添加工单的弹窗窗体开始-->
        <el-dialog v-model="addworkTicketDialogVisible" title="添加工单" width="600" align-center>
            <!-- 添加用户的表单 -->
            <el-form label-width="100px" :model="newworkTicket" style="max-width: 460px">
                <el-form-item label="编号">
                    <el-input v-model="newworkTicket.workTicketCode" />
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="newworkTicket.workTicketName" />
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-input v-model="newworkTicket.enableFlag" />
                </el-form-item>
                <el-form-item label="说明">
                    <el-input type="textarea" :rows="2" v-model="newworkTicket.attention" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" :rows="2" v-model="newworkTicket.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddworkTicket">取消</el-button>
                    <el-button type="primary" @click="doAddworkTicket">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加用户的弹窗窗体结束-->


        <!-- 工单数据管理的弹窗开始-->
        <el-dialog v-model="workTicketDataAttr.workTicketDataManagerDialogVisible" title="工单数据" width="80%" align-center>
            <!-- 工具栏开始 -->
            <div class="flex">
                <el-button title="新增工单数据" @click="this.workTicketDataAttr.addworkTicketDataDialogVisible = true"
                    type="primary"><el-icon>
                        <Plus />
                    </el-icon></el-button>
                <el-button @click="handlerDataEdits" title="编辑选中工单数据" type="primary"><el-icon>
                        <EditPen />
                    </el-icon></el-button>
                <el-button @click="handlerDataDeletes" title="删除选中工单数据" type="primary"><el-icon>
                        <Delete />
                    </el-icon></el-button>
            </div>
            <!-- 工具栏结束 -->

            <!-- 工艺数据表格 开始 -->
            <el-table ref="workTicketDataTable" :data="workTicketDataAttr.workTicketDatas" max-height="800px" stripe="true" border="true"
                style="width: 100%;margin-top: 10px;">
                <el-table-column align="center" type="selection" width="55" />
                <el-table-column align="center" label="#" property="dataId" />
                <el-table-column align="center" label="数据标签" property="dataTag" />
                <el-table-column align="center" label="数据键值" property="dataValue" />
                <el-table-column align="center" label="状态" property="dataStatus">
                    <template #default="scope">
                        <!-- scope.row 就是整行数据-->
                        <el-tag v-if="scope.row.dataStatus == 1" class="ml-2" type="success">正常</el-tag>
                        <el-tag v-else class="ml-2" type="danger">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="数据备注" property="dataNotes" />
                <el-table-column width="150" align="center" label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleDataEdit(scope.row)">编辑</el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                            @confirm="handleDataDelete(scope.row)" title="您是否要删除这行数据">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 工单数据表格结束 -->


            <!-- 添加工单数据的嵌套弹窗窗体开始-->
            <el-dialog v-model="workTicketDataAttr.addworkTicketDataDialogVisible" title="添加工单数据" width="600" align-center>
                <!-- 添加用户的表单 -->
                <el-form label-width="100px" :model="workTicketDataAttr.newData" style="max-width: 460px">
                    <el-form-item label="工单类型">
                        <el-input readonly v-model="currworkTicket.workTicketType" />
                    </el-form-item>
                    <el-form-item label="工单数据标签">
                        <el-input v-model="workTicketDataAttr.newData.dataTag" />
                    </el-form-item>
                    <el-form-item label="工单数据键值">
                        <el-input v-model="workTicketDataAttr.newData.dataValue" />
                    </el-form-item>
                    <el-form-item label="工单数据排序">
                        <el-input v-model="workTicketDataAttr.newData.dataOrder" type="number" />
                    </el-form-item>
                    <el-form-item label="工单数据备注">
                        <el-input type="textarea" :rows="2" v-model="workTicketDataAttr.newData.dataNots" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancelAddData">取消</el-button>
                        <el-button type="primary" @click="doAddData">
                            提交
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 添加用户的弹窗窗体结束-->
        </el-dialog>
        <!-- 工单数据管理的弹窗结束-->
    </div>
</template>
<script>
import workTicketRequest from '../../../api/workTicket-api.js';
import tools from '../../../util/tools.js';
import workTicketDatRequest from '../../../api/workTicket-data-api.js';
export default {
    data() {
        return {
            queryworkTicket: {}, // 分装查询工单条件的工单对象
            workTicket: [],// 工单数据列表
            workTicketCurrPage: 1, // 工单分页的当前页码
            workTicketLimit: 10, // 工单分页的每页大小
            workTicketTotal: 0, // 工单列表的总条数
            workTicketMaxPage: 1,// 工单列表的最大页码

            // 新增工单相关属性
            addworkTicketDialogVisible: false,// 新增工单的弹窗标志
            newworkTicket: {},// 封装新增的工单信息

            currworkTicket:{},// 保存正在操作的工单信息


            // 工单数据管理相关属性
            workTicketDataAttr: {
                workTicketDataManagerDialogVisible: false,//工单数据管理的弹窗标志 
                addworkTicketDataDialogVisible: false,// 新增工单数据的弹窗标志
                workTicketDatas: [],// 工单数据列表
                newData:{},// 封装新增工单数据对象
            }
        }
    },
    methods: {
	/**
		 * 字典数据行编辑取消
		 */
         cancelEditData(){
			 this.workTicketDataAttr.editworkTicketDataDialogVisible = false;
			 this.workTicketDataAttr.editDatas = {};
		},
		
		/**
		 * 字典数据行编辑确定
		 */
		doEditData(){
            // console.log("开始编辑")
            // 提交editUser即可
            workTicketDataRequest.edit(this.workTicketDataAttr.editDatas, res => {
                console.log("*******")
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '修改字典数据成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.workTicketDataAttr.editworkTicketDataDialogVisible = false;
                    // 重新加载数据
                    this.loadworkTicketData(this.currworkTicket.workTicketId);
                    // 将editUser制空
                    this.workTicketDataAttr.editDatas = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '字典数据重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 确定编辑字典
         */
        doworkTicketEdit() {
            console.log("开始编辑")
            // 提交editUser即可
            workTicketRequest.edit(this.editworkTicket, res => {
                console.log("*******")
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '修改字典成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.workTicketEditDrawer = false;
                    // 重新加载数据
                    this.loadworkTickets();
                    // 将editUser制空
                    this.editworkTicket = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '字典重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 取消字典编辑
         */
         cancelEdit() {
            // 将编辑的用户制空
            this.editworkTicket = {};
            // 关闭抽屉弹窗
            this.workTicketEditDrawer = false;
        },
        /**
         * 新增工单数据事件
         */
        doAddData(){
            // 将记录的工单编号保存到工单数据中
            this.workTicketDataAttr.newData.workTicketId = this.currworkTicket.workTicketId;
            console.log(this.workTicketDataAttr.newData);
			workTicketDataRequest.save(this.workTicketDataAttr.newData, res=>{
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddData();
                    // 重新加载数据
                    this.loadworkTicketData(this.currworkTicket.workTicketId);// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
            this.workTicketDataAttr.addworkTicketDataDialogVisible = false;
        },
        /**
         * 取消工单数据新增操作
         */
        cancelAddData(){
            this.workTicketDataAttr.addworkTicketDataDialogVisible = false;
            this.workTicketDataAttr.newData = {};
        },
        /**
         * 点击工单类型的事件，显示工单数据管理窗体
         * @param {*} row 
         */
        showworkTicketData(row) {
            this.workTicketDataAttr.workTicketDataManagerDialogVisible = true;
            this.loadworkTicketData(row.workTicketId);
            // 记录整行数据
            this.currworkTicket = row;
        },
        /**
         * 加载工单数据列表
         * @param {*} workTicketId 
         */
        loadworkTicketData(workTicketId) {
            // 加载数据
            workTicketDatRequest.list(workTicketId, res => {
                this.workTicketDataAttr.workTicketDatas = res.data;
            });
        },
        /**
         * 工单数据工具栏删除按钮事件
         */
        handlerDataDeletes() {
            let table = this.$refs.workTicketDataTable;
			    let selectionRows = table.getSelectionRows();
			    if(selectionRows == undefined || selectionRows.length == 0){
			        this.$message({
			            message:"您没有选中任何行",
			            type:"info"
			        });
			    }
			    else{
			    let dataIds = [];
			    selectionRows.forEach(item => {
			        dataIds.push(item.dataId);
			    });
			    workTicketDataRequest.deletes(dataIds,res=>{
			        this.$message({
			            type:"success",
			            message:"您成功删除了" + res.msg + "个字典数据"
			        });
			        this.loadworkTicketData(this.currworkTicket.workTicketId);
			    });
			}
         },
        /**
         * 工单数据工具栏编辑按钮事件
         */
        handlerDataEdits() { },
        /**
         * 工单数据列表的行删除事件
         * @param {*} row 
         */
        handleDataDelete(row) {
            console.log(row.dataId);
				    workTicketDataRequest.delete(row.dataId,res=>{
				        if(res.code == 200){
				            this.$message({
				                type:'success',
				                message:'删除成功'
				            });
				            this.loadworkTicketData(this.currworkTicket.workTicketId);    //************
				        }else{
				            this.$message({
				                type:'error',
				                message:'删除失败'
				            })
				        }
				    })
        },
        /**
         * 工单数据列表行编辑事件
         */
        handleDataEdit(row) {
            workTicketDataRequest.selectById(row.dataId, res => {
			        this.workTicketDataAttr.editworkTicketDataDialogVisible = true;
			        this.workTicketDataAttr.editDatas = res.data;
			    })
        },
        /**
         * 新增工单的提交按钮事件
         */
        doAddworkTicket() {
            // 数据校验：略
            // 提交数据
            workTicketRequest.save(this.newworkTicket, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddworkTicket();
                    // 重新加载数据
                    this.loadworkTicket();// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
        },
        /**
         * 取消新增工单的按钮事件
         */
        cancelAddworkTicket() {
            // 关闭窗体
            this.addworkTicketDialogVisible = false;
            // 清空newworkTicket
            this.newworkTicket = {};
        },
        /**
         * 行删除事件
         * @param {} row 
         */
        handlerDelete(id) {
            console.log(id);
            workTicketRequest.delete(id,res=>{
                if(res.code == 200){
                    this.$message({
                        type:'success',
                        message:'删除成功'
                    });
                    this.loadworkTickets();
                }else{
                    this.$message({
                        type:'error',
                        message:'删除失败'
                    })
                }
            })
        },
        /**
         * 行编辑事件
         * @param {*} row 
         */
            handleEdit(row) {
            workTicketRequest.selectById(row.workTicketId, res => {
                this.workTicketEditDrawer = true;
                this.editworkTicket = res.data;
            })
        },
        /**
         * 时间毫秒数转换为对应的字符串
         * @param {*} time 
         */
        timeFormatter(row, column, time) {
            return tools.timeMillisToString(time);
        },
        /**
         * 工具栏-选中删除按钮事件
         */
        handlerDeleteworkTicket() {
            let table = this.$refs.workTicketTable;
            let selectionRows = table.getSelectionRows();
            if(selectionRows == undefined || selectionRows.length == 0){
                this.$message({
                    message:"您没有选中任何行",
                    type:"info"
                });
            }
            let workTicketIds = [];
            selectionRows.forEach(workTicket => {
                workTicketIds.push(workTicket.workTicketId);
            });
            workTicketRequest.deletes(workTicketIds,res=>{
                this.$message({
                    type:"success",
                    message:"您成功删除了" + res.msg + "个工单"
                });
                this.loadworkTicket();
            })
        },
        /**
         * 工具栏-选中编辑按钮事件
         */
        handlerEditworkTicket() {

        },
        /**
         * 工单列表的翻页函数
         * @param {} value  最新页码
         */
        changePage(value) {
            this.workTicketCurrPage = value;
            this.loadworkTicket();
        },
        /**
         * 加载工单数据
         */
        loadworkTicket() {
            workTicketRequest.list(this.workTicketCurrPage, this.workTicketLimit, this.queryworkTicket, res => {
                // 设置数据
                this.workTicket = res.data.list;
                this.workTicketTotal = res.data.total;
                this.workTicketMaxPage = res.data.pages;
            });
        }
    },
    mounted() {
        // 默认加载工单数据列表
        this.loadworkTicket();
    }
}
</script>